<template>
  <div>
    <mu-appbar title="反馈" style="position: fixed;left: 0;top: 0">
      <mu-icon-button icon="navigate_before" slot="left" @click="$router.back()"/>
      <mu-icon-button icon="camera_enhance"
                      slot="right"
                      @click="$router.push({name:'reportCourseFeedback'})"/>
    </mu-appbar>
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <mu-circular-progress
          :size="20"
          class="pull-down-refresh__progress"
          v-if="refreshing"
          style="position: relative;left: 50%;transform:translateX(-50%)"/>
        <course-feedback-item
          v-for="item in courseFeedbackList"
          :key="item.id"
          :title="item.title"
          :content="item.content"
          :date="item.greateDate"
          :imageList="item.imagePath"
          :id="item.id"
          class="course-feedback-item"
          @refresh="refresh"/>
        <mu-divider/>
        <mu-circular-progress
          :size="20"
          class="pull-load-load__progress"
          v-if="loading"
          style="position: relative;left: 50%;transform:translateX(-50%)"/>
        <p v-else style="text-align: center">似乎已经没有了 <a href="javascript:void (0)" style="color: #1d7db1" @click="load">重新加载</a></p>
      </div>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import CourseFeedbackItem from './CourseFeedbackItem.vue'
  import resources from '../store/resources'
  import store from '../store/store'

  export default {
    components: {
      CourseFeedbackItem
    },
    created() {
//      请求反馈列表
      resources.getCourseFeedbackList(0, this.numEachRequest)
        .then(
          response => {
            this.courseFeedbackList = response
            this.$nextTick(() => {
              console.log('refresh OK')
              if (this.scroller) {
                this.scroller.refresh()
              }
            })
          },
          error => {
            store.commit('createToast', error.message)
          }
        )
    },
    mounted() {

//      初始化滚动插件
      this.$nextTick(() => {
        this.scroller = new BScroll(this.$refs.wrapper, {
          pullDownRefresh: {
            stop: 10
          },
          pullUpLoad: {
            threshold: 100
          },
          click: true
        })
        this.scroller.on('pullingDown', () => {
          this.refresh()
        })
        this.scroller.on('pullingUp', () => {
          this.load()
        })
      })
    },
    data() {
      return {
        scroller: null,

//        是否正在下拉刷新
        refreshing: false,
//        是否正在上拉加载
        loading: false,

//        反馈列表
        courseFeedbackList: [],
//        每次请求数
        numEachRequest: 5,

      }
    },
    computed: {},
    methods: {
      test(e) {
        let files = Array.from(e.target.files)
        if (files.length > 0) {
          resources.uploadImage(files[0])
        }
      },
      finishPullDown() {
        this.scroller.finishPullDown()
        this.refreshing = false
      },
      finishPullUp() {
        console.log('finish')
        this.loading = false
        this.scroller.finishPullUp()
      },
      refresh() {                                 //下拉刷新
        this.refreshing = true
        setTimeout(() => {

          resources.getCourseFeedbackList(0, this.numEachRequest)
            .then(
              list => {
                this.courseFeedbackList = list
                this.scroller.refresh()
                this.finishPullDown()
              },
              error => {
                store.commit('createNoticePopup', error.message)
                this.finishPullDown()
              }
            )

        }, 1000)
      },
      load() {
        this.loading = true
        setTimeout(() => {

          resources.getCourseFeedbackList(this.courseFeedbackList.length, this.numEachRequest)
            .then(
              list => {
                this.courseFeedbackList = this.courseFeedbackList.concat(list)
                this.scroller.refresh()
                this.finishPullUp()
              },
              error => {
                store.commit('createNoticePopup', error.message)
                this.finishPullUp()
              }
            )

        },1000)
      }
    }
  }
</script>
<style scoped>
  .wrapper {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
  }

  .content {
    width: 100%;
    padding-top: 4.5em;
    min-height: 101%;

  }

  .course-feedback-item {
    width: 80%;
    margin: 0 auto 2em auto
  }

  .content > *:nth-last-child(2) {
    margin-bottom: 12px;
  }
</style>
